import {useEffect,useState} from 'react'
import { View, Text,Checkbox,Label,CheckboxGroup,Button,Input } from '@tarojs/components'

function List () {
  let list = [
    {
      id:'1',
      name:'裤子',
      text:'',
      price: 100,
      number: 0,
      judeg: false
    },
    {
      id:'2',
      name:'鞋子',
      text:'',
      price: 100,
      number: 0,
      judeg: false
    }
  ]
  let [objList,setObjList] = useState(list)
  let [box1,setBox] = useState(false)
  let [tal,setTal] = useState(0)
  let [idl,setId] = useState([])
  let setList = (e,id) => {
    console.log()
    let nan = Number.isNaN(Number.parseInt(e.target.value))
    if(nan)  {
      setTal(0)
    } else {
      let list1 = objList.map(res => {
        if(res.id === id) {
          res.number = Number.parseInt(e.target.value)
        }
        return res
      })
      setObjList(list1)
      let tal1 = total()
      setTal(tal1)
    }
    
    } // 输入
    let add = (id,judge = false) => {
      if(idl.length === 0) return
      let list1 = objList.map(res => {
        if(res.id === id) {
          if(judge) { // 判断 增加 还是 减少 按钮
            res.number = res.number - 1
          } else {
            res.number = res.number + 1
          }
        }
        return res
      })
      let tal1 = total()
      setTal(tal1)
      setObjList(list1)
    } // 新增
    let total = () => {
      if(idl.length === 0) {
        return 0
      } else {
        let num = 0
        objList.map(res=>{
          if(res.judeg) {
            num = num + (res.price * res.number)
          }
        })
        return num
      }
    } // 总价
    useEffect(()=>{
      if(idl.length > 0) {
        let list1 = objList.map(res=>{
          if(idl.includes(res.id)) {
            res.judeg = true
            return res
          } else {
            res.judeg = false
            return res
          }
        })
        setObjList(list1)
        let tal1 = total()
        setTal(tal1)
      }
      if(idl.length === 0) {
        setTal(0)
      }
    
    },[idl])
    let box = (e) => {
      console.log(e)
      let idList:Array<any> = e.detail.value
      setId(idList)
    } // 单选
    let all = (e) => {
      let boxarr = e.detail.value
      if(Array.isArray(boxarr) && boxarr.length > 0) {
        let objlist1 = objList.map(res=>{
          res.judeg = true
          return res.id
        })
        setObjList(objList)
        setId(objlist1)
      } else {
        objList.map(res=>{
          res.judeg = false
          return res.id
        })
        setObjList(objList)
        setId([])
      }
    } // 全选
  return <View>
    <CheckboxGroup onChange={(e)=>{box(e)}}>
    {objList.map(res=>{
      return <View key={res.id}>
        <Checkbox  checked={res.judeg} value={res.id} />
        <Text>{res.name}</Text>
        <Input value={res.number + ''} onInput={(e)=>{setList(e,res.id)}}  /> 
        <Text>{res.id}</Text>
        <Text>{res.text}</Text>
        <Text>单价：{res.price}</Text>
        <Button onClick={()=>{add(res.id)}}>增加</Button>
        <Button onClick={()=>{add(res.id,true)}}>减少</Button>
      </View>
    })}
  </CheckboxGroup>
  
  <View>
      总价：{tal + ''}
      <CheckboxGroup onChange={(e)=>{all(e)}}>
      <Checkbox checked={box1}  value={`${box1}`} />
      </CheckboxGroup>
    </View>
  </View>
}

export default List;